<template>
  <view class="page"
    ><view :style="{ height: statusBarHeight + 'px' }"></view
    ><view class="nav-bar"
      ><view class="nav-left" @tap="goBack">
        <text class="fa fa-chevron-left search-icon"></text></view
      ><text class="nav-title">课程详情</text></view
    ><scroll-view scroll-y class="content"
      ><image
        class="cover"
        src="https://images.unsplash.com/photo-1551076805-e1869033e561?q=80&w=1400"
        mode="aspectFill"
      /><view class="info">
        <view class="info-item">
          <text class="lecturer">讲师：王健 · 主任医师</text
          ><text class="title">临床思维能力提升（CTA）</text>
        </view>
        <text class="project">项目：住院医师规范化培训</text
        ><text class="desc"
          >通过典型案例，系统训练临床思维路径，从病史采集、体格检查、辅助检查到诊断与决策，全面提升住培医师的临床综合判断能力。</text
        ></view
      ><view class="catalog"
        ><text class="catalog-title">目录</text
        ><view class="chapter-list"
          ><view class="chapter" @tap="goToVideo"
            ><view class="chapter-icon chapter-icon-blue"
              ><text class="fa fa-play"></text></view
            ><view class="chapter-info"
              ><text class="chapter-name">1. 病史采集的关键要点</text
              ><text class="chapter-type">视频 · 08:36</text
              ><view class="progress"
                ><view class="progress-bar" :style="{ width: '100%' }"></view
                ><text class="progress-text">已完成</text></view
              ></view
            ></view
          ><view class="chapter" @tap="goToDocument"
            ><view class="chapter-icon chapter-icon-green"
              ><text class="fa fa-file-text"></text></view
            ><view class="chapter-info"
              ><text class="chapter-name">2. 体格检查标准操作规程</text
              ><text class="chapter-type">文档 · 1:36</text
              ><view class="progress"
                ><view class="progress-bar" :style="{ width: '75%' }"></view
                ><text class="progress-text">75%</text></view
              ></view
            ></view
          ><view class="chapter" @tap="goToGallery"
            ><view class="chapter-icon chapter-icon-purple"
              ><text class="fa fa-image"></text></view
            ><view class="chapter-info"
              ><text class="chapter-name">3. 辅助检查结果解读图谱</text
              ><text class="chapter-type">图文 · 02:36</text
              ><view class="progress"
                ><view class="progress-bar" :style="{ width: '40%' }"></view
                ><text class="progress-text">40%</text></view
              ></view
            ></view
          ><view class="chapter" @tap="goToVideo"
            ><view class="chapter-icon chapter-icon-blue"
              ><text class="fa fa-play"></text></view
            ><view class="chapter-info"
              ><text class="chapter-name">4. 常见误区与案例分析</text
              ><text class="chapter-type">视频 · 14:02</text
              ><view class="progress"
                ><view
                  class="progress-bar progress-bar-gray"
                  :style="{ width: '0%' }"
                ></view
                ><text class="progress-text progress-text-gray"
                  >未开始</text
                ></view
              ></view
            ></view
          ></view
        ></view
      ></scroll-view
    ></view
  >
</template><script>
export default {
  data() {
    return { statusBarHeight: 0 };
  },
  onLoad() {
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0;
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    goToVideo() {
      uni.navigateTo({ url: "/pages/video-learning/video-learning" });
    },
    goToDocument() {
      uni.navigateTo({ url: "/pages/document-reading/document-reading" });
    },
    goToGallery() {
      uni.navigateTo({ url: "/pages/gallery-view/gallery-view" });
    },
  },
};
</script><style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #f9fafb, #eff6ff);
  display: flex;
  flex-direction: column;
}
.nav-bar {
  height: 44px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.nav-left {
  position: absolute;
  left: 16px;
}
.nav-title {
  font-size: 17px;
  font-weight: 600;
}
.content {
  flex: 1;
}
.cover {
  width: 100%;
  height: 200px;
}
.info {
  padding: 16px;
}
.info-item {
  position: absolute;
  top: 145px;
}
.lecturer {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
}
.title {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}
.project {
  display: block;
  font-size: 12px;
  color: #2563eb;
  margin-bottom: 8px;
}
.desc {
  display: block;
  font-size: 14px;
  color: #374151;
  line-height: 1.6;
}
.catalog {
  padding: 0 16px 16px;
}
.catalog-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
}
.chapter-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chapter {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.chapter-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}
.chapter-icon-blue {
  background: #dbeafe;
}
.chapter-icon-green {
  background: #dcfce7;
}
.chapter-icon-purple {
  background: #f3e8ff;
}
.chapter-info {
  flex: 1;
}
.chapter-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  margin-bottom: 4px;
}
.chapter-type {
  display: block;
  font-size: 12px;
  margin-bottom: 8px;
}
.progress {
  display: flex;
  align-items: center;
  gap: 8px;
}
.progress-bar {
  height: 4px;
  background: linear-gradient(to right, #3b82f6, #4f46e5);
  border-radius: 2px;
}
.progress-bar-gray {
  background: #e5e7eb;
}
.progress-text {
  font-size: 12px;
  color: #16a34a;
  font-weight: 500;
}
.progress-text-gray {
  color: #6b7280;
}
.fa-file-text {
  color: rgb(22 163 74);
}
.fa-image {
  color: rgb(147 51 234);
}
.fa-play {
  color: rgb(37, 99, 235);
}
</style>

